<template>
  <div class="wrapper flex flex-direction-column">
    <ul class="bg-bubbles">
      <li v-for="i in 10" :key="i">
        <img :src="xhImg" alt="" />
      </li>
    </ul>
    <div class="flex-1 z-height">
      <div class="img-box">
        <img :src="xsImg" alt="" />
      </div>
      <div class="input">
        <div class="input-title">天涯地角有穷时，只有相思无尽处</div>
        <div class="input-search">
          <van-cell-group class="van-cell-group cell-border">
            <van-field v-model="formParam.name" placeholder="我想对你说">
            </van-field>
            <van-button
              class="search-btn"
              size="small"
              type="danger"
              :loading="loading"
              loading-type="spinner"
              loading-text="正在查询..."
              icon="search"
              @click="searchFn"
            ></van-button>
          </van-cell-group>
        </div>
      </div>
      <van-divider :style="{ color: '#fff' }">我想对你说</van-divider>
    </div>
    <div ref="box" class="list flex-2">
      <van-list>
        <van-cell
          v-for="(item, index) in list"
          :key="index"
          :title="item.remark"
          :label="'时间: ' + item.leaveDate"
        />
      </van-list>
      <div class="footer-pd"></div>
    </div>

    <van-search
      class="sms-send"
      v-model="formParam.remark"
      show-action
      placeholder="请输入你想对我说的"
      left-icon="chat-o"
    >
      <template #action>
        <div class="sms-btn" @click="leaveFn">发送</div>
      </template>
    </van-search>
  </div>
</template>

<script>
import { Toast } from 'vant';
import xs from '@public/img/xs.jpg'
import xh from '@public/img/xh.png'

import { add, search } from '@/assets/api/home.js'
export default {
  components: {
  },
  props: {},
  data () {
    return {
      loading: false,
      xsImg: xs,
      xhImg: xh,
      list: [],
      formParam: {
        name: '',
        remark: ''
      }
    };
  },
  created () {

  },
  methods: {
    leaveFn () {
      add(this.formParam).then((res) => {
        console.log(res)
        if (res.success) {
          this.searchFn()
          return
        }
        Toast({
          message: res.msg,
          className: "toast-background"
        });
      })
    },
    searchFn () {
      search({
        name: this.formParam.name
      }).then((res) => {
        console.log(res)
        if (res.success) {
          this.formParam.remark = ""
          this.list = res.data
          this.$refs.box.scrollTop = 0;
          return
        }
        Toast({
          message: res.msg
        });

      })
    }

  },
  mounted () {
    this.formParam = this.$route.query
  },
  computed: {},
  watch: {},
};
</script>
<style>
.van-toast {
  background-color: #ff976a94 !important;
}
</style>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  overflow: hidden;
  .z-height {
    z-index: 99;
  }
  .img-box {
    height: 170px;
    overflow: hidden;
  }
  img {
    width: 100%;
  }
  .input {
    .input-title {
      width: 100%;
      text-align: center;
      font-size: 16px;
      padding: 20px 0;
      color: #fff;
    }
    .input-search {
      position: relative;
      border: 1px solid #d7d7d7;
      margin: 0 20px;
      border-radius: 10px;
      overflow: hidden;
      .search-btn {
        padding: 0 20px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: initial;
      }
    }
  }
  .van-cell {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 30px;
    .van-cell__title {
      color: #fff;
      .van-cell__label {
        color: #fff;
      }
    }
  }
  .van-button--danger {
    background-color: #e42b5187;
    border: 1px solid #e42b5187;
  }
  .sms-send {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #d7d7d7;
    background: #f7abb3c4;
    padding: 10px 20px;
    .van-search__content {
      background: #fff;
    }
    .van-search__action:active {
      background: initial;
    }
  }
  .sms-btn {
    color: #fff;
  }
  .list {
    overflow: auto;
    background: rgba(255, 255, 255, 0.1);
  }
  .footer-pd {
    padding: 30px;
  }
}

.bg-bubbles {
  position: absolute;
  background: #f997a1c4;
  // 使气泡背景充满整个屏幕；
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // 如果元素内容超出给定的宽度和高度，overflow 属性可以确定是否显示滚动条等行为；
  overflow: hidden;
  img {
    width: 100%;
  }
  li {
    position: absolute;
    // bottom 的设置是为了营造出气泡从页面底部冒出的效果；
    bottom: -60px;
    // 默认的气泡大小；
    width: 40px;
    height: 40px;
    // background-color: rgba(255, 255, 255, 0.5);
    list-style: none;
    // 使用自定义动画使气泡渐现、上升和翻滚；
    animation: square 8s infinite;
    // transition-timing-function: linear;
    // 分别设置每个气泡不同的位置、大小、透明度和速度，以显得有层次感；
    &:nth-child(1) {
      left: 10%;
    }
    &:nth-child(2) {
      left: 20%;
      width: 40px;
      height: 40px;
      animation-delay: 2s;
      animation-duration: 6s;
    }
    &:nth-child(3) {
      left: 25%;
      animation-delay: 4s;
    }
    &:nth-child(4) {
      left: 40%;
      width: 30px;
      height: 30px;
      animation-duration: 6s;
      // background-color: rgba(255, 255, 255, 0.4);
    }
    &:nth-child(5) {
      left: 70%;
    }
    &:nth-child(6) {
      left: 80%;
      width: 20px;
      height: 20px;
      animation-delay: 8s;
      // background-color: rgba(255, 255, 255, 0.2);
    }
    &:nth-child(7) {
      left: 32%;
      width: 30px;
      height: 30px;
      animation-delay: 4s;
    }
    &:nth-child(8) {
      left: 65%;
      width: 20px;
      height: 20px;
      animation-delay: 6s;
      animation-duration: 5s;
    }
    &:nth-child(9) {
      left: 25%;
      width: 10px;
      height: 10px;
      animation-delay: 5s;
      animation-duration: 6s;
      // background-color: rgba(255, 255, 255, 0.3);
    }
    &:nth-child(10) {
      left: 85%;
      width: 10px;
      height: 10px;
      animation-delay: 5s;
    }
  }
  // 自定义 square 动画；
  @keyframes square {
    100% {
      opacity: 1;
      transform: translateY(0px) rotate(45deg);
    }
    // 25% {
    //   opacity: 0.75;
    //   transform: translateY(-400px) rotate(90deg);
    // }
    // 50% {
    //   opacity: 1;
    //   transform: translateY(-600px) rotate(135deg);
    // }
    0% {
      opacity: 0;
      transform: translateY(-1000px) rotate(180deg);
    }
  }
}
</style>
